<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">设置</p>
    </van-nav-bar>
    <van-cell-group>
      <van-cell title="地址管理" @click="address">
        <template #icon>
          <img src="img/icon-address.png" width="18" height="18" style="position: relative;top: 2px;margin-right: 9px"/>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="修改密码" @click="modify">
        <template #icon>
          <img src="img/icon-modify.png" width="25" height="25"
               style="position: relative;top: -1px;right:3px;margin-right: 2px"/>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group style="margin-top: 13px">
      <van-cell title="退出登录" @click="logOut">
        <template #icon>
          <img src="img/icon-quit.png" width="18" height="18" style="position: relative;top: 2px;margin-right: 8px"/>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'Setting',
  methods: {
    ...mapMutations({
      changeActive: 'tabs/doActive'
    }),
    back () {
      this.$router.back()
    },
    address () {
      console.log('地址管理')
      this.$router.push('/addressList')
    },
    logOut () {
      console.log('退出登录')
      localStorage.removeItem('token')
      localStorage.removeItem('userid')
      this.$router.push('/')
      // this.changeActive(0)
      this.$toast.success({
        message: '退出登录'
      })
    },
    modify () {
      console.log('修改密码')
      this.$router.push('/modify')
    }
  }
}
</script>

<style scoped>
.container {
  text-align: left;
}
</style>
